import React from 'react'
import Taro from '@tarojs/taro'
import {Image, View, Text} from '@tarojs/components'
import './index.scss'

export default function WelfareCenter() {
  let capsule = {}
  if(process.env.TARO_ENV === 'weapp') capsule = Taro.getMenuButtonBoundingClientRect()
  return (
    <View className='welfare-center'>
      <View className="welfare-header">
        <Image src={require('@/images/vip/welfare-bg.png')} mode='widthFix' style={{width:'100vw'}}></Image>
      </View>

      <View style={{padding:'12px'}}>
      <View className="welfare-privilege">
        <View className="welfare-title">
          <Image src={require('@/images/vip/welfare-title.svg')} mode='widthFix' style={{width:'16px'}} />
          <Text style={{margin:'0 5px'}}>电影VIP特权</Text>
          <Image src={require('@/images/vip/welfare-title.svg')} mode='widthFix' style={{width:'16px',transform: 'rotate(180deg)'}} />
        </View>
        <View className="privilege-main">
          <View className="main-left"></View>
          <View className="main-info">
            <View className="h2">电影票·买一赠一代金券</View>
            <View className="box-flex">
              <Text style={{color:'#274BFB'}}>已结束</Text>
              <View className="info-button">300积分兑换</View>
            </View>
          </View>
        </View>
      </View>

      <View className="welfare-kill">
        <View className="welfare-title">
          <Image src={require('@/images/vip/welfare-title.svg')} mode='widthFix' style={{width:'16px'}} />
          <Text style={{margin:'0 5px'}}>券包秒杀</Text>
          <Image src={require('@/images/vip/welfare-title.svg')} mode='widthFix' style={{width:'16px',transform: 'rotate(180deg)'}} />
        </View>
        <View className="kill-list">
          <View className="list-item">
            <Image src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' className='item-img' mode='aspectFill'></Image>
            <View style={{padding:8}}>
              <View className="h2 dot">上影天虹大光明...</View>
              <View className="item-price"><Text style={{fontSize:'10px'}}>￥</Text>5 <Text className='price-del'>￥10.00</Text></View>
              <View className="item-button">立即抢购</View>
            </View>
          </View>
        </View>
      </View>

      <View className="welfare-hot">
        <View className="welfare-title">
          <Image src={require('@/images/vip/welfare-title.svg')} mode='widthFix' style={{width:'16px'}} />
          <Text style={{margin:'0 5px'}}>热映好片</Text>
          <Image src={require('@/images/vip/welfare-title.svg')} mode='widthFix' style={{width:'16px',transform: 'rotate(180deg)'}} />
        </View>
        
        <View className="hot-list">
          <View className="list-item">
            <View className="item-img">
              <Image className='img' src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' />
              <View className="img-footer"><Text style={{fontWeight:600,fontSize:'12px'}}>9.6</Text> 万人想看</View>
            </View>
            <View style={{padding: 8}}>
              <View className="item-h2 dot">热辣滚烫</View>
              <View className="item-button">立即购买</View>
            </View>
          </View>
        </View>
      </View>

      <View className="welfare-periphery">
        <View className="welfare-title">
          <Image src={require('@/images/vip/welfare-title.svg')} mode='widthFix' style={{width:'16px'}} />
          <Text style={{margin:'0 5px'}}>生活周边</Text>
          <Image src={require('@/images/vip/welfare-title.svg')} mode='widthFix' style={{width:'16px',transform: 'rotate(180deg)'}} />
        </View>
        <View className="periphery-list">
          <View className="list-item">
            <Image src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' className='item-img' mode='aspectFill' />
            <View style={{padding:'10px 8px'}}>
            <View className="item-h2 dot2">美影正版 阿凡提的故事 阿凡提和毛驴Q版手办...</View>
            <View className="item-info">
              <View className="info-price"><Text style={{fontSize:12}}>￥</Text>25.90</View>
              <View className="info-span">已售 200 件</View>
            </View>
            </View>
          </View>
        </View>
      </View>

      </View>
    </View>
  )
}
